<template>
  <view class="container">
    <div class="content">
      <div style="height: 10px;"></div>
      <div class="card" v-if="edit" @click="addInfo">
        <div class="topFlex">
          <div>新增自派车辆</div>
          <div class="addS">新增</div>
        </div>
      </div>
      <div style="height: 10px;"></div>
      <div v-for="item in list" v-if="edit" style="margin-top: 15rpx">
        <div class="card">
          <div style="height: 10px;"></div>
          <div style="display: flex;align-items:center ;justify-content: space-between;width: 90%;margin-left: 5%;">
            <div style="font-size: 18px;font-weight: bold;">{{ item.licenseNumber }}</div>
            <div class="sendCar">自派车</div>
          </div>
          <div style="height: 10px;"></div>
          <u-line></u-line>
          <div class="cards">
            <!-- <div class="flex">
              <div>车牌号</div>
              <div>{{ item.licenseNumber }}</div>
            </div> -->
            <div style="height: 15rpx"></div>
            <div class="flex">
              <div>有机质类型</div>
              <div>{{ item.organicType }}</div>
            </div>
            <div style="height: 15rpx"></div>
            <div class="flex">
              <div>装载量（吨）</div>
              <div>{{ item.vehicleTonnage }}</div>
            </div>
            <div style="height: 15rpx"></div>
            <div class="flex">
              <div>购买日期</div>
              <div>{{ item.purchaseDate }}</div>
            </div>
            <div style="height: 15rpx"></div>
            <div class="flex">
              <div>司机姓名</div>
              <div>{{ item.driverName }}</div>
            </div>
            <div style="height: 15rpx"></div>
            <div class="flex">
              <div>司机电话</div>
              <div>{{ item.driverPhone }}</div>
            </div>
            <div style="height: 20px"></div>
            <div class="editCar"  @click="itemCar(item)">编辑车辆</div>
            <div style="height: 20px"></div>
          </div>
        </div>
      </div>
      <div v-if="edit" style="height: 30px"></div>
      <!-- <div class="btn" v-if="edit" @click="addInfo">新增信息</div> -->

      <div v-if="edit" style="height: 30px"></div>
      <!-- <div class="btn" v-if="edit" @click="editInfo">编辑信息</div> -->
      <!-- 编辑表单 -->
      <div v-if="!edit">
        <div class="cardEdit">
          <div style="height: 10px;"></div>
          <div style="font-size: 18px;font-weight: bold;margin-left: 5%;">车辆信息</div>
          <div style="height: 10px;"></div>
          <u-line></u-line>
          <div style="width: 90%;margin-left: 5%;">
            <div style="height: 10px;"></div>
            <div>
              <div>司机选择</div>
              <div style="height: 15rpx;"></div>
              <div class="borders">
                <picker @change="bindPickerCar" :value="index" :range="arrayCar">
                  <input placeholder="请选择" style="height: 42px;" disabled v-model="carForm.driverName" type="text" />
                </picker>
              </div>
            </div>
            <div style="height: 10px;"></div>
            <div>
              <div>车牌号</div>
              <div style="height: 15rpx;"></div>
              <div class="borders">
                <input placeholder="请输入" style="height: 42px;" v-model="carForm.licenseNumber" type="text" />
              </div>
            </div>
            <div style="height: 10px;"></div>
            <div>
              <div>行驶记录仪（选填）</div>
              <div style="height: 15rpx;"></div>
              <div class="borders">
                <input placeholder="请输入" style="height: 42px;" v-model="carForm.clientId" type="text" />
              </div>
            </div>
            <div style="height: 10px;"></div>
            <div>
              <div>运输有机质类型</div>
              <div style="height: 15rpx;"></div>
              <div class="borders">
                <picker @change="bindPickerChange" :value="index" :range="array">
                  <input placeholder="请选择" style="height: 42px;" disabled v-model="carForm.organicType" type="text" />
                </picker>
              </div>
            </div>
            <div style="height: 10px;"></div>
            <div>
              <div>装载量（吨）</div>
              <div style="height: 15rpx;"></div>
              <div class="borders">
                <input placeholder="请输入" style="height: 42px;" v-model="carForm.vehicleTonnage" type="text" />
              </div>
            </div>
            <div style="height: 10px;"></div>
            <div>
              <div>联系电话</div>
              <div style="height: 15rpx;"></div>
              <div class="borders">
                <input placeholder="请输入" style="height: 42px;" disabled v-model="carForm.driverPhone" type="text" />
              </div>
            </div>
            <div style="height: 10px;"></div>
            <div>
              <div>购买日期</div>
              <div style="height: 15rpx;"></div>
              <div class="borders">
                <picker mode="date" :value="carForm.purchaseDate" :start="startDate" :end="endDate"
                  @change="bindDateChange">
                  <input style="height: 42px;" disabled v-model="carForm.purchaseDate" type="text" />
                </picker>
              </div>
            </div>
          </div>
          <div style="height: 10px;"></div>
        </div>
        <div style="height: 10px"></div>
      </div>
    </div>
    <div style="height: 30px"></div>
    <div class="btn" v-if="!edit" @click="saveInfo">提交</div>
  </view>
</template>
<script>
import { farmgetCar, editFarmCar, addFarmCar, driverList } from "../api/api";
import { organicType } from "../../common/example";
export default {
  data() {
    const currentDate = this.getDate({
      format: true
    })
    return {
      list: [],
      array: [], //有机质类型列表
      arrayCar: [],
      arrayCarFind: [],
      edit: true,
      id: "",
      carForm: {
        userId: '',
        vehicleModel: "货车",
        licenseNumber: "",
        driverName: "",
        driverPhone: "",
        organicType: "",
        vehicleTonnage: "",
        vehicleType: "自派车",
        // driverId:'',
        vehicleTonnage: "",
        purchaseDate: currentDate,
        clientId:'非必填'
      },
    };
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  methods: {
    bindDateChange: function (e) {
      this.carForm.purchaseDate = e.detail.value
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    addInfo() {
      this.edit = false;
    },
    bindPickerChange: function (e) {
      console.log("picker发送选择改变，携带值为", e.detail.value);
      const value = e.detail.value;
      this.carForm.organicType = this.array[value];
    },
    bindPickerCar: function (e) {
      const value = e.detail.value;
      this.carForm.driverName = this.arrayCar[value];
      this.carForm.userId = this.arrayCarFind[value].userId;
      this.carForm.driverPhone = this.arrayCarFind[value].phonenumber;
      console.log(this.arrayCarFind[value], ' this.arrayCarFind[value]');
    },
    itemCar(i) {
      this.edit = false;
      console.log(i);
      if(i.clientId == ''){
        this.carForm.clientId = '非必填'
      }
      this.carForm = {
        driverName: i.driverName,
        licenseNumber: i.licenseNumber,
        driverPhone: i.driverPhone,
        vehicleTonnage: i.vehicleTonnage,
        vehicleModel: i.vehicleModel,
        // driverId:i.driverId,
        vehicleType: "自派车",
        vehicleTonnage: i.vehicleTonnage,
        organicType: i.organicType,
        userId: i.driverId,
        purchaseDate: i.purchaseDate,
      };
      this.id = i.id;
    },
    editInfo() {
      this.edit = false;
      console.log(this.edit);
    },
    clearForm() {
      this.id = "",
        this.carForm = {
          licenseNumber: "",
          driverName: "",
          driverPhone: "",
          organicType: "",
          vehicleType: "",
          vehicleTonnage: "",
          clientId:"非必填"
        };
    },
    saveInfo() {
      const allNotEmpty = Object.keys(this.carForm).every(
        (key) =>
          this.carForm[key] !== null &&
          this.carForm[key] !== undefined &&
          this.carForm[key] !== ""
      );
      if (allNotEmpty) {
        this.carForm.clientId = '';
        if (!this.id) {
          addFarmCar({
            driverId: this.carForm.userId,
            driverName: this.carForm.driverName,
            driverPhone: this.carForm.driverPhone,
            licenseNumber: this.carForm.licenseNumber,
            organicType: this.carForm.organicType,
            vehicleType: 1,
            vehicleModel: this.carForm.vehicleModel,
            vehicleTonnage: this.carForm.vehicleTonnage,
            purchaseDate: this.carForm.purchaseDate,
            clientId:this.carForm.clientId
          }).then((res) => {
            console.log(res.data);
            if (res.data.code == 200) {
              uni.showToast({
                title: res.data.msg,
                icon: "success",
                mask: true,
              });
              this.listFun();
              this.clearForm();
              this.edit = true;
            }
          });
        } else {
          editFarmCar({
            id: this.id,
            driverId: this.carForm.userId,
            driverName: this.carForm.driverName,
            driverPhone: this.carForm.driverPhone,
            licenseNumber: this.carForm.licenseNumber,
            organicType: this.carForm.organicType,
            vehicleType: 1,
            vehicleModel: this.carForm.vehicleModel,
            vehicleTonnage: this.carForm.vehicleTonnage,
            purchaseDate: this.carForm.purchaseDate
          }).then((res) => {
            console.log(res.data);
            if (res.data.code == 200) {
              uni.showToast({
                title: res.data.msg,
                icon: "success",
                mask: true,
              });
              this.listFun();
              this.clearForm();
              this.edit = true;
            }
          });
        }
      } else {
        uni.showToast({ title: '请输入完整', icon: 'none' })
        console.error(this.carForm);
      }

    },
    listFun() {
      farmgetCar().then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.list = res.data.data;
          console.log(this.list, "list");
        }
      });
    },
  },
  onShow() {
    this.listFun();
    // 有机质类型
    organicType().then((res) => {
      if (res.data.code == 200) {
        this.array = res.data.data;
      }
    });
    // 司机列表
    driverList({ remark: "养殖场司机" }).then(res => {
      console.log(res.data, '司机列表');
      this.arrayCar = res.data.rows.map((item) => item.userName);
      this.arrayCarFind = res.data.rows;
    })
  },
};
</script>
<style lang="scss">
.cardEdit {
  background: #ffffff;
  border-radius: 10px;
  // margin-left: 5%;
  // width: 90%;
}

.container {
  height: 100vh;
  width: 100vw;
  background: #f3f3f3;
  overflow-y: scroll;
  color: #000000;
}

.content {
  width: 90%;
  margin-left: 5%;
}

.card {
  padding: 10;
  background: #ffffff;
  border-radius: 10px;
}

.cards {
  width: 90%;
  margin-left: 5%;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn {
  background: #000000;
  color: #fff;
  width: 90%;
  margin-left: 5%;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-flex {
  display: flex;
  align-items: center;
  width: 100%;
}

.borders {
  border: 1px solid #000000;
  border-radius: 5px;
  text-align: center;
}

.sendCar {
  background-color: #dffcec;
  color: #000000;
  border-radius: 10px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.topFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: 5%;
  height: 70px;
  color:#000000;
  font-weight: 500;
  
}

.addS {
  background: #000000;
  border-radius: 6px;
  width: 60px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.editCar{
  height: 45px;
  color: #fff;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
</style>
